<template>
	<!-- <div>
	<headers/> -->
    <div class="chat-container">
        <div id="contents" class="message-container">
          <div class="message-box" v-for="message in messages">
            <p class="message-text" v-bind:class="{ 'user': message.isUser, 'chatbot': !message.isUser }" v-html="message.text"></p>
          </div>
        </div>
        <div class="input-container">
          <input type="text"  ref="inputValue" v-model="inputValue" @keyup.enter="sendMessage"/>
          <button @click="sendMessage">发送(S)</button>
        </div>
		<div class="shengming">
			本站点基于 GPT3 API 二次开发，仅供学习体验，使用前请知晓
			<a href="/mianze" target="_blank" rel="noreferrer" style="text-decoration-line:underline">免责申明</a>
		</div>
      </div>
	  <!-- <footers/>
	  </div> -->
</template>
<script>
// import headers from '@/components/head';
// import footers from '@/components/foot';
import {chatgpt,chatgpt1} from '@/api/chatgpt'
//import Qs from 'qs'//引入qs
export default {
components: {
  // headers,
  // footers,
  hendImgHeight: 0
},
  data () {
    return {
      messages: [],
      inputValue: '',
      chatHistory:'',
	  preAnswer:''
    }
  },
  // created() {
  //   // 获取当前设备的宽度，设置rem的根字体大小
  //   let width = window.innerWidth
  //   width = width <= 1200 ? 1200 : width
  //   const htmlObj = document.getElementsByTagName('html')[0]
  //   htmlObj.style.fontSize = width / 76.8 + 'px'
  
  //   // 对resize事件进行浏览器兼容处理
  //   if (document.createEvent) {
  //     var event = document.createEvent('HTMLEvents')
  //     event.initEvent('resize', true, true)
  //     window.dispatchEvent(event)
  //   } else if (document.createEventObject) {
  //     window.fireEvent('onresize')
  //   }
  
  //   // 监听页面resize事件，重新设置rem的根字体大小
  //   window.onresize = function () {
  //     let width = window.innerWidth
  //     width = width <= 1200 ? 1200 : width
  //     htmlObj.style.fontSize = width / 76.8 + 'px'
  //   }
  //   this.hendImgHeight = window.innerWidth / (1920 / 518)
  // },
  // destroyed() {
  //   const htmlObj = document.getElementsByTagName('html')[0]
  //   htmlObj.style.fontSize = ''
  //   window.onresize = null
  // },
  mounted() {
	  this.messages.push({ text: "您好，我是数壤AI聊天机器人，有什么问题想要了解的，快来找我把！", isUser: false })
  },
  methods: {
    sendMessage () {
      if (!this.inputValue) return
      this.messages.push({ text: this.inputValue, isUser: true })
	  setTimeout(function(){
		  var div = document.getElementById('contents');
		  div.scrollTop = div.scrollHeight; 
	  },200);
      this.chatHistory =  this.preAnswer + this.inputValue + "。";
	  /*chatgpt1({
	   "prompt": this.chatHistory
	   //"prompt": this.inputValue
	  }).then(res => {
	    if (res.code == 200) {
	        //console.log(res);
	        this.chatHistory =  this.chatHistory + res.data + "。";
	        this.messages.push({ text: res.data, isUser: false })
	    } else {
	      this.messages.push({ text: "<span style='color:gray'>"+res+'</span>', isUser: false })
	    }
	  
	  })*/
	  var params = { "prompt": this.chatHistory };
	  this.$axios({
		  url:'openai/chatgpt/chat1',
		  method:'post',
		  data:params,
		  header: {
		          "Content-Type": "application/json;charset:utf-8"
		        }
				
	  }).then((res) =>{          //这里使用了ES6的语法
		  //console.log(res.data)       //请求成功返回的数据
		  if (res.data.code == 200) {
			  //console.log(res);
			  this.preAnswer = res.data.data;
			  //this.chatHistory =  this.chatHistory + res.data.data + "。";
			  this.messages.push({ text: res.data.data, isUser: false })
			  setTimeout(function(){
				  var div = document.getElementById('contents');
				  div.scrollTop = div.scrollHeight; 
			  },200);
			 
		  } else {
			  this.messages.push({ text: "<span style='color:gray'>"+res.data.msg+'</span>', isUser: false })
			  setTimeout(function(){
				  var div = document.getElementById('contents');
				  div.scrollTop = div.scrollHeight; 
			  },200);
		  }
		 
	  }).catch((error) =>{
		  console.log(error)       //请求失败返回的数据
	  })
	  
      this.inputValue = ''
    },
  }
}
</script>

<style lang="scss" scoped>
 //  $ratio: 1920 / 76.8; // 缩放比   25
	
	// // 返回对应屏幕下的rem值
	// @function px2rem($px) {
	//   @return $px / $ratio + rem;
	// }
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: rgba(0,0,0,.2);
    }

    /*定义滚动条轨道
 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
        border-radius:10px;
        background-color:#F5F5F5;
    }
    /*定义滑块
     内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
        border-radius:10px;
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
        background-color: #dcdcdc;
    }
.chat-container {
  width: 800px;
  margin: 10px auto;
  //text-align: center;
  background:rgb(245,245,245);
}
.message-container {
  height: calc(100vh - 160px);
  overflow-y: scroll;
  padding: 20px;
}
.message-box {
  margin-bottom: 20px;
}
.message-text {
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  text-align:left;
  white-space: break-spaces;
}
.user {
  background-color: rgb(149,236,105);
  float: right;
}
.chatbot{
  margin-top:20px;
  background-color: rgb(255, 255, 255);
}
.input-container {
  text-align: center;
  margin-top: 20px;
}
.shengming{
	text-align: center;
	margin-top: 10px;
}
input[type="text"] {
  padding: 10px;
  width: 60%;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.1);
  outline: none;
  margin-right: 20px;
  margin-bottom:10px;
}
button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #e5e6e6;
  color:#00c587;
  font-size:14px;
  border:none;
  }
  button:hover{
    background-color: #d8d8d8;
    cursor:pointer;
  }
</style>
